<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>页签滑动效果</title>
    <style type="text/css">
        * {
            margin: 0px;
            padding: 0px;
        }

        .tap {
            width: 30%;
            margin: 50px auto 0px;
        }

        ul {
            /*padding: 0px;*/
            background-color: #ffcad3;
            list-style-type: none;
        }

        ul li {
            float: left;
            /*float: right;*/
            width: 100px;
        }

        ul li:hover {
            background-color: lightpink;
        }

        article{
            background-color: bisque;
        }

        article div {
            min-height: 200px;
        }

        .fun {
            display: none;
        }

        .clearfix {
            zoom: normal;
        }

        .clearfix:after {
            content: "";
            display: block;
            clear: both;
            visibility: hidden;
            height: 0;
            font-size: 0;
        }
    </style>
</head>
<body>
<div class="tap">
    <nav>
        <ul class="clearfix">
            <li>体育</li>
            <li>娱乐</li>
        </ul>
    </nav>
    <article>
        <div class="sport">
            体育体育体育体育体育体育体育体育体育体育体育体育体育体育体育体育体育体育体育体育体育体育体育体育体育体育
            体育体育体育体育体育体育体育体育体育体育体育体育体育体育体育体育体育体育体育体育体育体育体育体育体育体育
            体育体育体育体育体育体育体育体育体育体育体育体育体育体育体育体育体育体育体育体育体育体育体育体育体育体育
            体育体育体育体育体育体育体育体育体育体育体育体育体育体育体育体育体育体育体育体育体育体育体育体育体育体育
        </div>
        <div class="fun">
            娱乐娱乐娱乐娱乐娱乐娱乐娱乐娱乐娱乐娱乐娱乐娱乐娱乐娱乐娱乐娱乐娱乐娱乐娱乐娱乐娱乐娱乐娱乐娱乐娱乐娱乐娱乐娱乐
            娱乐娱乐娱乐娱乐娱乐娱乐娱乐娱乐娱乐娱乐娱乐娱乐娱乐娱乐娱乐娱乐娱乐娱乐娱乐娱乐娱乐娱乐娱乐娱乐娱乐娱乐娱乐娱乐
            娱乐娱乐娱乐娱乐娱乐娱乐娱乐娱乐娱乐娱乐娱乐娱乐娱乐娱乐娱乐娱乐娱乐娱乐娱乐娱乐娱乐娱乐娱乐娱乐娱乐娱乐娱乐娱乐
            娱乐娱乐娱乐娱乐娱乐娱乐娱乐娱乐娱乐娱乐娱乐娱乐娱乐娱乐娱乐娱乐娱乐娱乐娱乐娱乐娱乐娱乐娱乐娱乐娱乐娱乐娱乐娱乐
        </div>
    </article>
</div>
<script type="text/javascript" src="../js/Day_4/day_1.js"></script>
</body>
</html>